<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
    -->
    <div id="demo">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入" v-model="keyword">
        <button @click="sortType = 2">升序</button>
        <button @click="sortType = 1">降序</button>
        <button @click="sortType = 0">原序</button>
        <ul>
            <li v-for="(data) in filterDatanew">
                {{data.name}}-{{data.age}}-{{data.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            keyword:"",
            sortType:0,
            dataArr:[
                {name:"马冬梅",age:"19",sex:"女"},
                {name:"周冬雨",age:"22",sex:"女"},
                {name:"周杰伦",age:"33",sex:"男"},
                {name:"温兆伦",age:"44",sex:"男"},
            ],
            filterData:[]
        }
        
        ,computed:{
            filterDatanew(){
                const arr = this.filterData = this.dataArr.filter((p)=>{
                    console.log(p)
                    return p.name.indexOf(this.keyword) !== -1
                })
                if(this.sortType){
                    arr.sort((p1,p2)=>{
                        return this.sortType ===1?p2.age-p1.age:p1.age-p2.age
                    })
                }
                return arr
            }
        }
    })
    
    </script>
</body>
</html>